<template>
  <div>
    <h1>{{ title }}</h1>
    <h3>好家伙,我是组件</h3>
    <div ref="div">{{ str }}</div>
    <button @click="change">修改</button>
    <button @click="send">给父组件传值</button>
    <hr/>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref } from 'vue';

console.log("setup");

const props = withDefaults(defineProps<{
  title:string
}>(),{
  title: "子标题"
})

const emits = defineEmits(["on-click"]);

const send = () =>{
  emits("on-click","小满")
}

// const props = defineProps({
//   title:{
//     type:String,
//     default:"标题"
//   }
// })
console.log(props.title);


const str = ref<string>("小满")
const change = ()=>{
  str.value = "我被修改了"
}
const div = ref<HTMLDivElement>()
onBeforeMount(()=>{
  console.log("onBeforeMount",div.value);
  
})
onMounted(()=>{
  console.log("mount",div.value);
  
})
onBeforeUpdate(()=>{
  console.log("onBeforeUpdate",div.value?.innerText);
  
})
onUpdated(()=>{
  console.log("onUpdated",div.value?.innerText);
  
})
onBeforeUnmount(()=>{
  console.log("onBeforeUnmount");
  
})
onUnmounted(()=>{
  console.log("onUnmounted");
  
})

</script>

<style scoped>

</style>